<template>
<div>
 <div class="banner" @click="isShow=true">
     <img src="https://img1.qunarzz.com/sight/p0/2001/4b/4bebbcaf6822ffa2a3.img.jpg_600x330_0533f8d4.jpg" class="banner-img" alt="">
    <div class="banner-info">
        <div class="banner-title">南昌玛雅乐园</div>
        <div class="banner-number">
           <span class="iconfont">&#xe601;</span>
           22
       </div>
    </div>
 </div>
 <CommonGallary :imgArr='arr' v-show="isShow" @click.native ="isShow=false" />
 </div>
</template>

<script>
import  CommonGallary from '@/common/gallary/Gallary'
export default {
    components: {
        CommonGallary,
    },
    data(){
        return{
            arr:[{
                id:1,
                url:'https://imgs.qunarzz.com/sight/p0/1907/f4/f4e22361f3ad9423a3.img.jpg_r_800x800_ba57d994.jpg'
            },{
                id:2,
                url:'https://imgs.qunarzz.com/sight/p0/1907/f9/f929795665943e30a3.img.jpg_r_800x800_d46e7d89.jpg'
            },
            {
                id:3,
                url:'https://imgs.qunarzz.com/sight/p0/1907/7c/7c51473588bc453ea3.img.jpg_r_800x800_d226c4c0.jpg'
            },
            {
                id:4,
                url:'https://imgs.qunarzz.com/sight/p0/1907/be/be8c42bed61e51c9a3.img.jpg_r_800x800_d8e683ad.jpg'
            }],
            isShow:false
        }
    },
    methods:{
    
    }
}
</script>

<style lang="stylus" scoped>
.banner
    position relative
    overflow hidden
    height 0
    padding-bottom 50%
    background-color #cccccc
    .banner-img
        width 100%
    .banner-info
        position absolute
        left 0
        right 0
        bottom 0
        display flex
        // line-height .6rem
        .banner-title
            flex 1
            color #ffffff
            font-size .3rem
            padding .2rem
        .banner-number
            padding 0.2rem
            height .4rem
            line-height .4rem
            font-size .3rem
            color #fff
            background-color rgba(0,0,0,.8)
            border-radius .4rem
            .iconfont
                 font-size .3rem
</style>